<!-- 课程状态管理页面 -->
<template>
    <div style="height: 100%">
        <el-row style="height: calc(100% - 32px)" :gutter="10">
            <el-col :span="4">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                        <el-switch
                            style="float: right;"
                            active-text="上线"
                            inactive-text="下线"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{ '列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>



        </el-row>
        <el-row style="text-align: center;height: 32px">
            <el-pagination background layout="total,prev, pager, next" :total="paginationCofig.total"
                           @size-change="sizeChange" :pageSize="paginationCofig.pageSize"
                           :currentPage.sync="paginationCofig.currentPage" @current-change="currentChange"
                           @prev-click="prevClick" @next-click="nextClick"></el-pagination>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            /* 分页tiao */
            paginationCofig: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            tableData: [],
        }
    },
    methods: {
        /* 分页条-start */
        sizeChange(pageSize) {
            // this.memberListPage()
        },
        currentChange(currentPage) {
            // this.memberListPage()
        },
        prevClick(pageSize) {
            // this.memberListPage()
        },
        nextClick(currentPage) {
            // this.memberListPage()
        },
    },
    mounted() {

    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>